import React, { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, NavBar, Rate, Popup } from 'antd-mobile'
import { Selector } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import { TextArea } from 'antd-mobile'
import { Steps } from 'antd-mobile'
import { FrownOutline, SmileOutline } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import style from './home.module.css'

function Index() {
  const { Step } = Steps
  const [visible5, setVisible5] = useState(false)
  const nav = useNavigate()
  const [sp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')
  const price = sp.get('price')
  const startTime = sp.get('startTime')
  const endTime = sp.get('endTime')
  const time = sp.get('time')
  const cc = sp.get('cc')
  const id = sp.get('id')
  const [value, setValue] = useState('')
  const options = [
    {
      label: '有方案',
      description: '￥377',
      value: '0',
    },
    {
      label: '二等座',
      description: '￥533',
      value: '1',
    },
    {
      label: '一等座',
      description: '￥930',
      value: '2',
    },
    {
      label: '商务座',
      description: '￥1873',
      value: '3',
    },
  ]
  const pp = [
    {
      label: '二等座',
      description: '￥533',
      value: '1',
    },
    {
      label: '一等座',
      description: '￥930',
      value: '2',
    },
    {
      label: '商务座',
      description: '￥1873',
      value: '3',
    },
  ]
  const tt = () => {
    setValue('')
    localStorage.setItem('value', value)
  }
  return (
    <div>
      <div>
        <NavBar onBack={() => nav(-1)}>{dayjs().format('MM月DD日')}  周二</NavBar>
      </div>
      <div style={{ border: '1px solid #ccc' }}>
        <div className={style.row}>
          <span className={style.pp}>{startTime}</span>
          <span>{time}</span>
          <span className={style.pp}>{endTime}</span>
          <span>{start}</span>
          <span onClick={() => { setVisible5(true) }}>{cc}时刻表</span>
          <span>{end}</span>
        </div>
        <p style={{ textAlign: 'center' }}>购票须知   复兴号·智能动车</p>
      </div>
      <p>智能购票</p>
      <div>
        <Selector
          options={options}
          defaultValue={['0']}
          onChange={(arr, extend) => console.log(arr, extend.items)}
        />
      </div>
      <div>
        <p>二等座已售，为您找到也下有票方案</p>
        <div className={style.rows}>
          <span>上车</span>
          <span>二等座</span>
          <span>补4站</span>
          <span>上车</span>
          <span>{start}</span>
          <span>.............</span>
          <span>宿州东</span>
          <span>{end}</span>
        </div>
      </div>
      <div>
        <Collapse arrowIcon={<Button
          style={{ background: 'orangered', color: "#fff" }}
          onClick={()=>nav(`/order?start=${start}&end=${end}&startTime=${startTime}&endTime=
            ${endTime}&cc=${cc}&time=${time}&price=${price}&id=${id}`)}
          >订</Button>}>
          {
            pp.map((item, index) => {
              return <Collapse.Panel key={index} title={`￥${price}`}>
                <div className={style.row}>
                  <span>出行无忧<span style={{ color: 'orangered' }}>+￥49</span></span>
                  <span>车票退票补偿</span>
                  <span>￥5火车票卷</span>
                  <span>7项权益</span>
                  <span>免费12306账号</span>
                  <span>￥25国内机卷</span>
                </div>
              </Collapse.Panel>
            })
          }
        </Collapse>
      </div>
      <div>
        <h4>您愿意推荐好友来同程理性预订火车票吗？</h4>
        <span>
          <span><FrownOutline />非常不愿意</span><span style={{ float: 'right' }}><SmileOutline />非常愿意</span>
        </span>
        <p>
          <Rate onChange={val => Toast.show(val.toString())} />
        </p>
        <span>
          {localStorage.getItem('value')}
        </span>
        <TextArea
          placeholder='请输入内容'
          value={value}
          onChange={(val) => {
            setValue(val)
          }}
        />
        <Button block color='primary' size='large' onClick={(val) => tt(val)}>
          提交
        </Button>
      </div>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        <div>
          <span style={{ marginLeft: '150px', fontSize: '20px' }}>{cc}时刻表</span>
          <span onClick={() => { setVisible5(false) }} style={{ float: 'right' }} >X</span>
          <div className={style.rows}>
            <span>车站名称</span>
            <span>到达</span>
            <span>出发</span>
            <span>停留</span>
          </div>
          <div>
          <Steps direction='vertical'>
          <Step title={
           <div className={style.cc}>
           <span>北京南</span>
           <span>--</span>
           <span>06:00</span>
           <span>2分钟</span>
         </div>
          } status='process' />
          <Step title={
           <div className={style.cc}>
           <span>天津南</span>
           <span>06:44</span>
           <span>06:46</span>
           <span>2分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>德州东</span>
           <span>07:30</span>
           <span>07:32</span>
           <span>2分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>济南西</span>
           <span>07:56</span>
           <span>07:58</span>
           <span>2分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>徐州</span>
           <span>09:15</span>
           <span>09:20</span>
           <span>5分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>宿州东</span>
           <span>09:39</span>
           <span>09:45</span>
           <span>6分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>南京南</span>
           <span>10:44</span>
           <span>10:47</span>
           <span>3分钟</span>
         </div>} status='wait' />
         <Step title={
           <div className={style.cc}>
           <span>无锡东</span>
           <span>11:31</span>
           <span>11:33</span>
           <span>2分钟</span>
         </div>} status='wait' />
        </Steps>
          </div>
        </div>
      </Popup>
    </div>
  )
}
export default Index